<template>
  <div>
    <el-form :inline="true"  :model="equipmentinfo" class="demo-form-inline">
      <el-form-item label="设备id" prop="id">
        <el-input v-model="equipmentinfo.id" readonly></el-input>
      </el-form-item>
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="equipmentinfo.name" readonly></el-input>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          label="产能信息id"
          prop="id"
          width="150">
      </el-table-column>

      <el-table-column
          label="产品名称"
          prop="productid"
          width="120">
        <template slot-scope="scope">
          <span v-for="productname in productnames" v-show="productname.id == scope.row.productid">
            {{productname.productname}}
          </span>
        </template>
      </el-table-column>

      <el-table-column
          label="产品产能(件/小时)"
          prop="num">
      </el-table-column>

    </el-table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:null,
      productnames:null,
      id:null,
      equipmentinfo:{
        id:null,
        name: null
      },
    };
  },created() {
    this.id=this.$route.query.id;
    this.getTableData();
    axios.get('http://localhost:8081/order/getProductname').then(
        (response) => {
          this.productnames = response.data;
        }
    );
    axios.get("http://localhost:8081/equipment/findById/"+this.id).then((response)=>{
      this.equipmentinfo = response.data;
    });
  },
  methods: {
    getTableData(){
      axios.get("http://localhost:8081/capactity/findAllByEquipmentid/"+this.id).then((response)=>{
        this.tableData = response.data;
      });
    },
  }
}
</script>